<template>
    <div class="k-login-view">
        <div class="k-login-container">
            <h1 class="k-login-title">XX 管理系统</h1>
            <el-form @submit.prevent="handleLogin" size="default">
                <el-form-item>
                    <el-input type="text" id="username" v-model="username" required prefix-icon="User" />
                </el-form-item>
                <el-form-item>
                    <el-input type="password" id="password" v-model="password" required prefix-icon="Lock" />
                </el-form-item>
                <el-form-item>
                    <!-- 验证码 -->
                    <div style="display: flex;width: 100%;">
                        <el-input type="text" id="captcha" v-model="captcha" required placeholder="请输入验证码"
                            prefix-icon="Crop" style="flex: 1; margin-right: 10px;" />
                        <img :src="captchaUrl" alt="验证码" @click="refreshCaptcha" style="border: 1px solid #ccc" />
                    </div>
                </el-form-item>
                <div style="text-align: center;">
                    <el-button type="primary" @click="handleLogin">登录</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import auth from "@/api/auth";
import { ElMessage } from "element-plus";
export default {
    data() {
        return {
            username: '',
            password: '',
            captcha: '',
            captchaUrl: '/api/user/captcha', // 假设验证码的URL
            redirectPath: '/'
        };
    },
    mounted() {
        // 获取重定向路径
        this.redirectPath = this.$route.query.redirect || '/';
        console.log('Redirect path:', this.redirectPath);
        // Check if user is already logged in
        auth.getUserInfo().then(resp => {
            const userInfo = resp.data || {};
            if (userInfo && userInfo.isLogin) {
                this.$router.push({ path: this.redirectPath });
            }
        }).catch(() => {
            // Handle error if needed
        });
    },
    methods: {
        handleLogin() {
            // Handle login logic here
            if (this.username && this.password) {
                // Simulate a successful login
                auth.login({ username: this.username, password: this.password, verCode: this.captcha })
                    .then((resp) => {
                        const { code, msg, data } = resp;
                        if (code === '200') {
                            ElMessage.success('Login successful!');
                            // Redirect or perform further actions as needed
                            this.$router.push({ path: this.redirectPath });
                        } else {
                            ElMessage.error(msg || '111-Login failed. Please check your credentials.');
                            this.refreshCaptcha();
                        }
                    })
                    .catch((e) => {
                        console.log(e);

                        ElMessage.error('222-Login failed. Please check your credentials.');
                    });
            } else {
                ElMessage.warning('Please enter both username and password.');
            }
        },
        refreshCaptcha() {
            // Refresh the captcha image by appending a timestamp to avoid caching
            this.captchaUrl = `/api/user/captcha?${new Date().getTime()}`;
        }
    }
};
</script>

<style scoped>
.k-login-view {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;

    .k-login-container {
        width: 400px;
        margin: 0 auto;
        padding: 20px;
        background-color: #ffffff;
        border-radius: 8px;

        .k-login-title {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
        }
    }
}
</style>